import React from "react";
import { Typography, Space, Form, Input, Button } from "antd";
import { UserAddOutlined } from "@ant-design/icons";

import styles from "./Register.module.scss";
import { LOGIN_PATHNAME } from "../router";
import { Link, useNavigate } from "react-router-dom";
import { RegisterType } from "../types";
import { useRequest, useTitle } from "ahooks";
import { registerService } from "../services/user";
import useNavPage from "../hooks/useNavPage";
import { MD5 } from "crypto-js";

const { Title } = Typography;

const Register: React.FC = () => {
  useTitle("新问卷");
  useNavPage();
  const nav = useNavigate();
  const { loading, run } = useRequest(
    async (values) => {
      const { userName, password, nickName } = values;
      return await registerService(
        userName,
        MD5(password).toString(),
        nickName
      );
    },
    {
      manual: true,
      onSuccess() {
        nav(LOGIN_PATHNAME);
      },
    }
  );

  function onFinish(values: RegisterType) {
    run(values);
  }

  return (
    <div className={styles.container}>
      <Space>
        <Title level={2}>
          <UserAddOutlined />
          &nbsp;注册新用户
        </Title>
      </Space>
      <div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名"
            name="userName"
            rules={[
              {
                required: true,
                message: "请输入用户名",
              },
              {
                type: "string",
                min: 2,
                max: 20,
                message: "字符长度在2-20之间",
              },
              {
                pattern: /^\w+$/,
                message: "只能输入数字、字母和下划线",
              },
            ]}
          >
            <Input allowClear />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
              {
                type: "string",
                min: 6,
                max: 20,
                message: "字符长度在6-20之间",
              },
            ]}
          >
            <Input.Password allowClear />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirm"
            dependencies={["password"]}
            rules={[
              {
                required: true,
                message: "请再次输入密码",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject(new Error("两次密码不一致"));
                  }
                },
              }),
            ]}
          >
            <Input.Password allowClear />
          </Form.Item>
          <Form.Item
            label="昵称"
            name="nickName"
            rules={[
              {
                type: "string",
                min: 2,
                max: 20,
                message: "字符长度在2-20之间",
              },
            ]}
          >
            <Input allowClear />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit" disabled={loading}>
                注册
              </Button>
              <Link to={LOGIN_PATHNAME}>已有帐号，登录</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Register;
